<template>
	<view class="addr">
		<view class="addrForm">
			<uni-forms :modelValue="formData" label-position="left" ref="uform" :rules="rules">
						<uni-forms-item label="地址信息" name="isCheck">
							<view class="check">
									<image src="../../static/cz_xz@2x.png" v-show="formData.isCheck" @click="formData.isCheck = !formData.isCheck"></image>
									<image src="../../static/cz_zc@2x.png" v-show="!formData.isCheck" @click="formData.isCheck = !formData.isCheck"></image>
									<text>默认收货地址</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="收件人" name="name">
							<view :class="['name',act=='name'?'active':'']" @click="act = 'name'">
								<input  type="text" v-model="formData.name" placeholder="收件人名字"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="手机号" name="phone">
							<view :class="['phone',act=='phone'?'active':'']" @click="act = 'phone'">
								<view class="radio">
									<text>+86</text>
									<uni-icons type="down" size="15"></uni-icons>
								</view>
								<input type="number" v-model="formData.phone" placeholder="手机号"/>
							</view>
						</uni-forms-item>
						<uni-forms-item label="所在地区" name="region">
							<view :class="['region']" >
								<uni-data-picker placeholder="省市区县乡镇" popup-title="请选择所在地区" :localdata="addreList" v-model="formData.region"
												@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
								</uni-data-picker>
							</view>
						</uni-forms-item>
						<uni-forms-item label="详细地址" name="address">
							<textarea :class="[act=='address'?'active':'']" v-model="formData.address" placeholder="小区" @click="act = 'address'"></textarea>
						</uni-forms-item>
					</uni-forms>
		</view>
		<view class="btn">
			<u-button  color="red" shape="circle" @click="add()">保存</u-button>
		</view>
	</view>
</template>

<script>
	import addrList from '@/pagesE/static/data/address.js'
	import {mapGetters, mapActions} from 'vuex';
	export default {
		data() {
			return {
				addreList:addrList,
				act:'',
				formData:{
					id:0,
					isCheck:false,
					name:'',
					phone:'',
					region:'',
					regionText:'',
					address:'',
				},
				rules:{
					name:{rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}],
					},
					phone:{rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (!(/^1[3456789]\d{9}$/.test(value))) {
									callback('手机格式错误')
									}
								return true
							}
						}]},
					region:{rules: [{
							required: true,
							errorMessage: '地址不能为空'
						}],},
					address:{rules: [{
							required: true,
							errorMessage: '地址详情不能为空'
						}],},
				}
					
				
			}
		},
		computed:{
			...mapGetters('addrs',['getList'])
		},
		methods: {
			...mapActions('addrs',['addAddr']),
				onnodeclick(e) {
					console.log(e);
				},
				onpopupopened(e) {
					console.log('popupopened');
				},
				onpopupclosed(e) {
					console.log('popupclosed');
				},
				onchange(e) {
					this.formData.regionText = '';
					console.log('onchange:', e.detail.value);
					e.detail.value.forEach((item)=>{
					this.formData.regionText += item.text;
					})
				},
				add(){
					this.$refs.uform.validate().then(res => {
						console.log(this.formData);
						if(this.getList.length > 0){
							this.formData.id = this.getList[this.getList.length-1].id+1;
						}
						this.addAddr(this.formData);
						this.formData = {
							id:0,
							isCheck:false,
							name:'',
							phone:'',
							region:'',
							regionText:'',
							address:'',
						};
						uni.showToast({
							title: `添加成功`
						})
					}).catch(err => {
						console.log('err', err);
						})
				}
		}
	}
</script>

<style lang="scss">
	
	.addr{
		.active{
			border: 1.5px solid red;
			border-radius: 8px;
		}
		padding: 10px;
		.addrForm{
			background-color: white;
			border-radius: 10px;
			overflow: hidden;
			.check{
				display: flex;
				align-items: center;
				height: 100%;
				float: right;
			}
			.check image{
				width: 15px;
				height: 15px;
				margin-right: 5px;
			}
			.name{
				height: 100%;
			}
			.name input{
				text-indent: 10px;
			}
			.phone{
				height: 100%;
				display: flex;
				justify-items: center;
				align-items: center;
				background-color: #f3f3f3;
				border-radius: 8px;
				.radio{
					width: 20%;
					text-align: center;
				}
			}
			.region{
				height: 100%;
				display: flex;
				justify-items: center;
				align-items: center;
				background-color: #f3f3f3;
				border-radius: 8px;
			}
			.region input{
				background-color: unset;
				width: 95%;
				text-indent: 10px;
			}
		}
		.addrForm input{
			height: 100%;
			border-radius: 8px;
			background-color: #f3f3f3;
			align-items: center;
			font-size: 13px;
		}
		.addrForm textarea{
			width: 96%;
			height: 60px;
			background-color: #f3f3f3;
			padding: 5px;
			border-radius: 8px;
		}
		.btn{
			width: 90%;
			position: fixed;
			bottom: 0;
			padding: 10px;
		}
	}
</style>
